<template>
  <div class="category">
    <div class="category-header">
      <div class="search">
        <van-icon name="search" size="21" />
        <span class="holder" @click="toSearch">搜索商品，共144565款好物</span>
      </div>
    </div>
    <div class="category-main">
      <div class="main-left">
        <div class="left-bar">
          <div
            class="bar-item" :class="{active:currentId===item.id}"
            v-for="item in categoryStore.categoryL1List"
            :key="item.id" @click="changeCurrentId(item.id as number)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="main-right">
        <el-scrollbar>
          <div class="first-container">
            <img class="banner-img" :src="bannerSrc" />
          </div>
          <!-- 进入页面默认的显示 -->
          <!-- <div class="recommend-list">
          <image
            class="recommend-img"
            src="https://yanxuan.nosdn.127.net/076a28810809721a782d4de715624f37.png?quality=75&type=webp&imageView"
          ></image>
          <div class="recommend-intro">换季清场</div>
        </div>        -->
          <!-- 点击其他选项显示的楼层 -->
          <Card v-for="item in currentCard" :key="item.id" :info="item"></Card>         
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';


export default defineComponent({
  name: 'Classify',
});
</script>

<script lang="ts" setup>
import { onMounted, computed, ref } from 'vue';
import Card from './component/Card/index.vue';
import { useCategoryStore } from '@/stores/category';
import { useRouter } from 'vue-router';
const categoryStore = useCategoryStore();
const router = useRouter();
//高亮标识
const currentId = ref(0)
const bannerSrc = ref('')
const currentCard = ref<any>({})
function changeCurrentId(id:number){
  currentId.value = id
  const currentCate = categoryStore.categoryL1List.find(item=>item.id===id)
  bannerSrc.value = currentCate?.bannerUrl as string
  currentCard.value = currentCate?.categoryGroupList
}
function toSearch() {
  router.push({
    name: 'search',
  });
}
onMounted(async () => {
  await categoryStore.getCategoryList();
  // console.log(categoryStore.categoryL1List);
  currentId.value = categoryStore.categoryL1List[0].id as number
  bannerSrc.value = categoryStore.categoryL1List[0].bannerUrl as string
  currentCard.value = categoryStore.categoryL1List[0].categoryGroupList
});

</script>

<style scoped>
.category {
  height: 100%;
  background-color: #ededed;
}
.category-header {
  width: 100%;
  background-color: white;
  /* border: 1px solid black; */
  box-sizing: border-box;
  height: 44px;
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search {
  width: 345px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #ededed;
}
.holder {
  font-size: 14px;
  color: #333;
}
.category .category-main {
  width: 100%;
  height: 574px;
}
.category-main .main-right {
  width: 294px;
  height: 574px;
  padding: 15px 15px 0 15px;
  margin-left: 81px;
  box-sizing: border-box;
  background-color: white;
  border-top: 1px solid #ededed;
}
.category-main .main-left {
  width: 81px;
  height: 574px;
  float: left;
  background-color: white;
  border: 1px solid #ededed;
  /* box-sizing: border-box; */
}
.left-bar {
  width: 81px;
  padding: 20px 0;
}
.bar-item {
  width: 100%;
  height: 25px;

  font-size: 14px;
  text-align: center;
  line-height: 25px;
}
.bar-item:not(:first-child) {
  margin-top: 20px;
}
.active {
  color: #ab2b2b;
  border-left: 4px solid #ab2b2b;
  box-sizing: border-box;
}
.first-container {
  width: 100%;
  height: 96px;
  margin-bottom: 16px;
}
.first-container .banner-img {
  width: 100%;
  height: 100%;
}
.recommend-list {
  width: 72px;
  margin-right: 17px;
}
.recommend-img {
  width: 100%;
  height: 72px;
}
.recommend-intro {
  width: 100%;
  text-align: center;
}
</style>
